<template>
	<div class="wallet-deposit-channel px-[35px]">
		<div class="pt-[10px] text-t-1 pb-[8px]">{{ rechargeChannelTitle }}</div>
		<ul class="flex flex-nowrap overflow-x-auto overflow-y-hidden pl-0 gap-[7px]">
			<li class="w-[72px] text-center" v-for="(channel, index) in channelList" :key="index">
				<div
					class="w-[70px] h-[50px] rounded-[10px] overflow-hidden border-[2.5px] bg-bg-1 border-transparent"
					:class="{ '!border-[var(--color-primary)]': selectedChannelIndex === index }"
					@click="selectRechargeChannel(channel, index)">
					<base-image :src="channel.icon" type="server" class="w-full h-full" />
				</div>
				<p
					:class="[
						{ '!text-primary': selectedChannelIndex === index },
						'mt-[6px] text-sm items-center text-t-2'
					]">
					{{ channel.name }}
				</p>
			</li>
		</ul>
	</div>
</template>

<script lang="ts" setup>
import { computed, PropType, ref } from 'vue'
import { t } from '@/utils'
import { ChannelListType } from '@/types'
import { BaseImage } from '@/components/base'

const props = defineProps({
	currentType: {
		type: String,
		default: ''
	},
	channelList: {
		type: Array as PropType<ChannelListType>,
		default: () => []
	}
})
const rechargeChannelTitle = computed(() => {
	if (props.currentType === 'Crypto') {
		return t('wallet.usdtNetworkSelect')
	}
	return t('wallet.depositChannel')
})

const selectedChannelIndex = ref(0)

const emit = defineEmits(['select'])
const selectRechargeChannel = (channel: any, channelIndex: number) => {
	selectedChannelIndex.value = channelIndex
	emit('select', channel)
}

defineExpose({ selectRechargeChannel })
</script>
<style scoped lang="scss"></style>
